<template>
  <div class="aiCreationDetail_container pr-1 pl-1">
		<div class="aiCreationDetail_container_image mb-0">
			<van-image :src="imgInfo.detailImageUrl" radius="16px" fit width="100%" @click="imgClick">
				<template v-slot:loading>
					<van-loading type="spinner" size="20" />
				</template>
			</van-image>
		</div>
		<div class="aiCreationDetail_container_content br-16 padding-1">
			<div class="aiCreationDetail_container_content_title">{{ $t("图片详情") }}</div>
			<div class="aiCreationDetail_container_content_copy pr-1 pl-1 mb-1 mt-0">
				<div>{{ imgInfo.des }}</div>
				<img src="@/image/homePage/aiImageDetail/cope.png" @click="copyText" alt="">
			</div>
			<div class="aiCreationDetail_container_content_title">{{ $t("基本信息") }}</div>
			<!-- <div class="aiCreationDetail_container_content_context">
				<div class="aiCreationDetail_container_content_context_title">
					{{ $t("模型主题") }}
				</div>
				<div class="aiCreationDetail_container_content_context_content">
					{{ imgInfo.theme  }}
				</div>
			</div> -->
			<div class="aiCreationDetail_container_content_context">
				<div class="aiCreationDetail_container_content_context_title">
					{{ $t("风格选择") }}
				</div>
				<div class="aiCreationDetail_container_content_context_content">
					{{ imgInfo.style  }}
				</div>
			</div>
			<div class="aiCreationDetail_container_content_context">
				<div class="aiCreationDetail_container_content_context_title">
					{{ $t("图片尺寸") }}
				</div>
				<div class="aiCreationDetail_container_content_context_content">
					{{ imgInfo.size  }}
				</div>
			</div>
		</div>
		<div v-if="detaileShow" class="btn_download" @click="downloadImage">{{ $t('点击下载') }}</div>
	</div>
</template>

<script>
import { ImagePreview } from 'vant';
import { clipboard } from '@/utils';
import { getAiDrawDetail } from "@/request/homePage"
export default {
  name: "AiCreationDetail",
	components:{
	},
	data(){
		return {
			imgInfo:{
				// detailImageUrl: require("@/image/homePage/indexList/testImage.png"),
				// des: 'Ragdoll cat looking at daisy flower',
				// // theme: "通用",
				// style: "自由",
				// size: "1024*1024"
			},
			baseURL: process.env.VUE_APP_BASE_API,
			id: '',
			detaileShow: false,
		}
	},
	mounted(){
		// 请求图片详情信息
		this.id = this.$route.params.id
		this.getInfo()
	},
	methods:{
		getInfo(){
			getAiDrawDetail({id: this.id}).then(res=>{
				if(res.code == 1){
					this.imgInfo = {
						detailImageUrl: res.data.image,
						des: res.data.textcountent,
						style: this.$t(res.data.imagestyle),
						size: res.data.imageresolution
					}
				}
			})
		},
		imgClick(){
			ImagePreview({
				images: [this.imgInfo.detailImageUrl],
				closeable: true,
				showIndex:false,
				onClose() {
					this.detaileShow = false
				},
			})
			this.detaileShow = true
		},
		async copyText() {
			try {
				await clipboard.copy(this.imgInfo.des);
				this.$toast.success(this.$t('复制成功'));
			} catch {
				this.$toast.fail(this.$t('复制失败'));
			}
		},
		downloadImage() {
			if(this.imgInfo.detailImageUrl) {
				const xhr = new XMLHttpRequest();
				xhr.open('GET', this.imgInfo.detailImageUrl, true);
				xhr.responseType = 'blob';
				
				xhr.onload = () => {
					if (xhr.status === 200) {
						const blob = new Blob([xhr.response], {type: 'image/png'});
						const url = window.URL.createObjectURL(blob);
						const link = document.createElement('a');
						link.href = url;
						link.download = this.imgInfo.style + new Date().getTime() + '.png';
						link.style.display = 'none';
						document.body.appendChild(link);
						link.click();
						window.URL.revokeObjectURL(url);
						document.body.removeChild(link);
					}
				};
					
				xhr.send();
			} else {
				this.$toast(this.$t('暂无图片可下载'));
			}
		}
	}
};
</script>

<style>
</style>